<docs>
  ## 消息弹出框组件
  ## props
  * message 提示内容
  * btnText 按钮文案
</docs>
<template>
  <div class="weui-cell weui-cell_access data-picker1">
    <!-- :class="`weui-cell weui-cell_access data-picker1 ${valid === status.REJECTED ? 'weui-cell_warn' : ''}`"
   > -->
    <div class="weui-cell__hd">
      <p class="weui-label">{{label}}</p>
    </div>
    <div class="weui-cell__ft text" @click="selectDate">{{labelName || value}}</div>
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        :swipe-duration='Tiem'
        :loading="isLoadingShow"
        :max-date="maxDate"
        :min-date="minDate"
        type="year-month"
        title="选择年月"
        @confirm="confirmPicker"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>
<script>
import { mixinValid } from 'common/mixins/mixins';
import dayjs from 'dayjs';
export default {
  name: 'data-picker3',
  props: {
    label: String,
    prop: String,
    value: String,
    rules: Object,
  },
  mixins: [mixinValid],
  data() {
    return {
      visible: false,
      show: false,
      Tiem:'300',
      labelName: '',
      isLoadingShow:true,
      minDate: new Date(1960,4,1),
      maxDate:new Date(),
      currentDate: new Date(),
    };
  },
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }
      this.$emit('input', this.date);
      this.resetValid();
    },
    selectDate(mode) {
      this.mode = mode;
      this.show = true;
      this.isLoadingShow = true;
      setTimeout(() => {
        this.isLoadingShow = false;
      }, 10)
      this.date = '';
    },
    // 确认选择的时间
    confirmPicker (val) {
      let year = val.getFullYear();
      var month = val.getMonth() + 1;
      if (month < 10) {
        month ='0' +  month;
      }

      this.labelName = `${year}-${month}`;
      this.$emit('input', `${year}-${month}`);
      this.resetValid();
      this.show = false;
    }

  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.weui-label {
  @include label;
}
.text {
  text-align: left;
  flex: 1 1 auto;
  height: 60px;
  color: #000;
  font-size: 14px;
  overflow: hidden;
  @include input-text;
}
// /deep/ .van-picker{
//   position: fixed;
//   bottom: 0;
//   // margin-top: -50%;
//   width: 100%;
//   left: 0;
// }
/deep/ .van-datetime-picker{
  .van-picker__toolbar{
    height: 60px;
    .van-picker__cancel, .van-picker__confirm{
      font-size: $font-size-small;
      line-height: $font-size-small;
    }
    .van-picker__title{
      font-size: $font-size-small;
      line-height: $font-size-small;
    }
  }
  .van-picker-column__wrapper{
    font-size: $font-size-base;
  }
}

</style>
